<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script src="/resources/layui/layui.js"></script>
    <script src="/resources/js/jsLogin/jquery.min.js"></script>
    <script src="/resources/js/jsLogin/XiaLaKuWang.js"></script>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:70%}
    </style>
   <!-- 核心插件 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=vbdHb3GRObo7PyL18BZzW3EvOcIg5ok1"></script>
    <!--绘制图案-->

    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
</head>
<body>
<form  class="layui-form-select">
    <select name="province" onchange="getCity()">
        <option value="0">所在省</option>
        <option value="直辖市">直辖市</option>
        <option value="广东省">广东省</option>
        <option value="江苏省">江苏省</option>
        <option value="福建省">福建省</option>
    </select>
    <select name="city" onchange="getDistrict()">
        <option value="0">所在市</option>
    </select>
    <select class="clear-Mar" name="district">
        <option value="0">所在区</option>
    </select>
    <input type="text" name="" id="xx1"/>
    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
</form>
<div id="container"></div>
<form class="layui-form" action="">


    <div class="layui-inline">
        <label class="layui-form-label width_auto text-r" style="margin-top:2px">目的地：</label>
        <input type="text" name="xiangxi" id="xiangxi">
        <input type="text" name="xiangxix" id="xweizhi">
        <input type="text" name="xiangxiy" id="yweizhi">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    </div>
</form>
<script>
    layui.config({
        base: '/resources/js/' //静态资源所在路径
    }).extend({
        citypicker: '{/}/resources/js/jsLogin/city-picker' // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['jquery', 'table', 'citypicker'], function () {
        var $ = layui.$
            , table = layui.table
            , form = layui.form
            , cityPicker = layui.citypicker;
        var cityPicker = new cityPicker("#city-picker");
    });

</script>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>

<script>
    var map = new BMap.Map("container");
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.addControl(new BMap.NavigationControl());
    localmapl();
/*    map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
    window.setTimeout(function(){
        map.panTo(new BMap.Point(116.409, 39.918));
    }, 2000);*/
</script>

<!--<script>
    var point = new BMap.Point(116.404, 39.916);
    map.centerAndZoom(point, 15);
    var marker = new BMap.Marker(point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中

    marker.addEventListener("click", function(){
        alert("您点击了标注");
    });
    //拖拽标注
    marker.enableDragging();
    marker.addEventListener("dragend", function(e){
        alert("当前位置：" + e.point.lng + ", " + e.point.lat);


    })
</script>-->

<script>
    //指定经纬度获取地址
    // 创建地理编码实例
    var myGeo = new BMap.Geocoder();
    // 根据坐标得到地址描述
    myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){
        if (result){
            //alert(result.address);
        }
    });
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    var a="河北省",b="邯郸市",c="邯山区",d="鹏泰大厦";
    local.search(a);
    local.search(a+b);
    local.search(a+b+c);
    local.search(a+b+c+d);
/*

    var icon = new BMap.Icon('/resources/images/tuan.jpg', new BMap.Size(20, 32), {
        anchor: new BMap.Size(10, 30)
    });



    map.centerAndZoom(local.search.point, {
        icon: icon
    });
    var marker = new BMap.Marker(point);        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中




*/

  setTimeout(function(){
      var center = map.getCenter();
      map = new BMap.Map("container");
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      map.addControl(new BMap.NavigationControl());
      console.log(center);
      var point = new BMap.Point(center.lng,center.lat);
      map.centerAndZoom(point, 15);
      var marker = new BMap.Marker(point);        // 创建标注
      map.addOverlay(marker);                     // 将标注添加到地图中
      localmapl();
  },3000);

</script>

<script>
    function localmapl(){
        //点击地图获取地址
        var geoc = new BMap.Geocoder();
        map.addEventListener("click", function(e){
            var pt = e.point;
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                $("#xiangxi").val(addComp.street+ addComp.streetNumber);
                $("#xweizhi").val(e.point.lng)
                $("#yweizhi").val(e.point.lat)

            });
        });
    }
</script>
</body>
</html>